<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-2.1.1.min.js"></script>

    <script src="/js/jquery-form.js"></script>
    <link rel="stylesheet" href="/js/easyui1.5/themes/icon.css">
    <link rel="stylesheet" href="/js/easyui1.5/themes/default/easyui.css">
    <script src="/js/easyui1.5/jquery.easyui.min.js"></script>
</head>
<body>
<div>
    <form id="query_book_form">

        员工:<input name="staffName"class="easyui-textbox" data-options="iconCls:'icon-man'" style="width:200px"><br>
    </form>
    <a id="btn" onclick="queryBook()" href="javascript:void(0)"class="easyui-linkbutton" data-options="iconCls:'icon-remove'">查找</a>
    <a id="btn_add" onclick="addData()" href="javascript:void(0)"class="easyui-linkbutton" data-options="iconCls:'icon-remove'">增加</a>
</div>
  <table id="dg">

  </table>
<!-- 弹框增加start -->
<div id="add_div"  class="easyui-dialog" title="员工管理" style="width:600px;height:300px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					submitData()//调用另一个方法
				}
			},{
				text:'关闭',
				iconCls:'icon-no',
				handler:function(){
				   $('#add_div').dialog('close');
				}
			}]">

    <form id="user-from">
        <input type="hidden" name="staffId">
        <table>
            <tr>
                <td>员工账号</td>
                <td><input name="staffName"></td>
            </tr>
            <tr>
                <td>员工密码</td>
                <td><input name="staffPwd"></td>
            </tr>
        </table>
    </form>
</div>
</body>
    <script type="text/javascript" th:inline="none">
        $(function(){
            $('#add_div').dialog('close');
            getQuanXian();

            normal2ajax();

        })

        function openDiv() {
            $('#add_div').dialog('open');
            $('#user-from').form("clear");
        }

        function getQuanXian(){
           $("#dg").datagrid({
               url:'/power/getQuanXian',
               striped:true,
               pagination:true,
               pageList:[1,2,3,4,5,7,10],
               pageSize:5,
               checkOnSelect:false,
               columns:[[
                   {field:'xxx',title:'xx',width:100,checkbox:true},
                   {field:'staffId',title:'id',width:100},
                   {field:'staffName',title:'姓名',width:100},
                   {field:'rname',title:'角色',width:100},
                   {field:'pname',title:'权限',width:100},
                   {field:'xsxs',title:'操作',width:300,
                       formatter:function(value,row,index){
                           var content="";
                               content+=" <a href='/view/getRole?userId="+row.id+"'>角色管理</a>";
                               content += " <a href='JavaScript:delUser("+row.id+")' >删除</a> ";
                           return content;
                       }
                   }
               ]]

           })
       }


       function delUser(id){
               $.ajax({
                   url:"/view/delStaff",
                   type:"POST",
                   data:{id:id},
                   success:function(pageUtil){
                       getQuanXian();
                       $.messager.show({
                           title:'消息',
                           msg:'删除成功!!',
                           timeout:5000,
                           showType:'slide'
                       });

                   },
                   error:function(){
                       alert("失败了");
                   }
               });
       }

       function queryBook(){

           $('#dg').datagrid('load',serializeFrom2Obj($("#query_book_form")));
       }

        //把表单转换为一个对象
        function serializeFrom2Obj (obj) {
            var o = {};
            var a = obj.serializeArray();//[{name:'price',value='12'},{},{}]
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };



        function normal2ajax(){
            $('#user-from').form({
                url:"/user/addStaff",
                onSubmit: function(){
                },
                success:function(data){

                        closedSubmitData();
                        $("#add_div").dialog("close");
                        $('#dg').datagrid('reload');
                }
            });
        }

        function submitData(){//进行提交表单
            $("#user-from").form('submit')
        }
        function addData(){
            $("#add_div").dialog("open");
            closedSubmitData();
        }
        function closedSubmitData(){
            $('#user-from').form("clear");
        }
    </script>
</html>